import React, { useState } from 'react'
import styles from './index.module.scss'
import {
  List,
  InputItem,
  Picker,
  ImagePicker,
  TextareaItem,
  Flex,
  Modal,
  Toast
} from 'antd-mobile'
import MyNavBar from '@/components/MyNavBar'
import HouseMatch from '@/components/HouseMatch'
import { connect } from 'react-redux'
import { uploadImage, publishHouse } from '@/api/rent'

const Item = List.Item

// 房屋类型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
  { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
  { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
  { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
  { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
]

// 楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]

// 朝向：
const orientedData = [
  { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
  { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
  { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
  { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
  { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
  { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
  { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
  { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
]

function RentAdd ({ history, community, communityName }) {
  const [files, setFiles] = useState([])
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [oriented, setOriented] = useState('')
  const [supporting, setSupporting] = useState('')
  const [price, setPrice] = useState('')
  const [roomType, setRoomType] = useState('')
  const [size, setSize] = useState('')
  const [floor, setFloor] = useState('')

  const onChange = (files, type, index) => {
    setFiles(files)
  }

  // 取消
  const cancel = () => {
    Modal.alert('提示', '放弃发布房源?', [
      { text: '放弃', onPress: () => history.goBack() },
      {
        text: '继续编辑'
      }
    ])
  }

  // 提交
  const submit = async () => {
    if (!community) {
      Toast.info('必须选择小区', 1)

      return
    }

    if (price.trim().length === 0) {
      Toast.info('必须填写租金', 1)

      return
    }

    if (size.trim().length === 0) {
      Toast.info('必须填写建筑面积', 1)

      return
    }

    if (roomType.trim().length === 0) {
      Toast.info('必须选择户型', 1)

      return
    }

    if (floor.trim().length === 0) {
      Toast.info('必须选择所在楼层', 1)

      return
    }

    if (oriented.trim().length === 0) {
      Toast.info('必须选择朝向', 1)

      return
    }

    if (title.trim().length === 0) {
      Toast.info('必须填写房屋标题', 1)

      return
    }

    if (files.length === 0) {
      Toast.info('必须选择房屋头像', 1)

      return
    }

    if (supporting.trim().length === 0) {
      Toast.info('必须选择房屋配套', 1)

      return
    }

    // 上传图片
    const res1 = await uploadImage(files)
    if (res1.data.status === 200) {
      const data = {
        community,
        price,
        size,
        title,
        roomType,
        floor,
        oriented,
        supporting,
        description,
        houseImg: res1.data.body.join('|')
      }

      // 发布
      const res2 = await publishHouse(data)
      if (res2.data.status === 200) {
        Toast.info('发布成功~', 1.5)

        // 跳转到我的出租列表页面
        history.replace('/rent')
      } else {
        Toast.info(res2.data.description)
      }
    }
  }

  return (
    <div className={styles.root}>
      <MyNavBar>发布房源</MyNavBar>
      <List renderHeader={() => '房源信息'} className='my-list'>
        <Item
          arrow='horizontal'
          extra={communityName ? communityName : '请输入小区名称'}
          onClick={() => history.push('/rent/search')}
        >
          小区名称
        </Item>
        <InputItem
          value={price}
          onChange={val => setPrice(val)}
          placeholder='请输入租金/月'
          extra={'￥/月'}
        >
          租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
        </InputItem>
        <InputItem
          value={size}
          onChange={val => setSize(val)}
          placeholder='请输入建筑面积'
          extra={'㎡'}
        >
          建筑面积
        </InputItem>
        <Picker
          value={[roomType]}
          onChange={val => setRoomType(val[0])}
          data={roomTypeData}
          cols={1}
        >
          <List.Item arrow='horizontal'>
            户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型
          </List.Item>
        </Picker>
        <Picker
          value={[floor]}
          onChange={val => setFloor(val[0])}
          data={floorData}
          cols={1}
        >
          <List.Item arrow='horizontal'>所在楼层</List.Item>
        </Picker>
        <Picker
          value={[oriented]}
          onChange={val => setOriented(val[0])}
          data={orientedData}
          cols={1}
        >
          <List.Item arrow='horizontal'>
            朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向
          </List.Item>
        </Picker>
      </List>
      <List renderHeader={() => '房屋标题'} className='my-list'>
        <InputItem
          value={title}
          onChange={val => setTitle(val)}
          placeholder='请输入标题（例如：整租 小区名 2室 5000元）'
        ></InputItem>
      </List>
      <List renderHeader={() => '房屋头像'} className='my-list'>
        <ImagePicker
          files={files}
          onChange={onChange}
          selectable={files.length < 8}
          multiple={true}
        />
      </List>
      <List renderHeader={() => '房屋配套'} className='my-list'>
        <HouseMatch readonly={false} onChange={val => setSupporting(val)} />
      </List>
      <List renderHeader={() => '房屋描述'} className='my-list'>
        <TextareaItem
          value={description}
          onChange={val => setDescription(val)}
          rows={5}
          placeholder='请输入房屋描述'
        />
      </List>
      <Flex className={styles.bottom}>
        <Flex.Item onClick={cancel} className={styles.cancel}>
          取消
        </Flex.Item>
        <Flex.Item onClick={submit} className={styles.confirm}>
          提交
        </Flex.Item>
      </Flex>
    </div>
  )
}

export default connect(({ community: { community, communityName } }) => {
  return {
    community,
    communityName
  }
})(RentAdd)
